<template>
  <el-scrollbar height="650px">
  <div style="height: 690px">
    <el-scrollbar height="750px">
      <div style="text-align: center;padding: 0px 0px 0px 0px;font-size: 30px">
        能力公司本月考勤
      </div>
      <div style="height: 400px;display: flex;margin-top: 70px">
        <div style="width: 60%;display: none">
          <div id="container" ref="chart"></div>
        </div>

          <div id="container2" ref="chart2"></div>
          <div style="float: right" id="container3" ref="chart3"></div>

      </div>
      <div>
        <div style="width: 45%;float: right">
          <div>早退人数</div>
          <el-table :span-method="SpanCellMerge2" :data="tableData" height="300" style="width: 100%">
            <el-table-column prop="deptName" label="部门" width="130" />
            <el-table-column prop="userEarly" label="工号" width="130" />
            <el-table-column prop="empName" label="名字" width="130" />
            <el-table-column prop="earlyTime" label="早退时间" />
          </el-table>
        </div>
        <div style="width: 45%;float: left">
          <div>迟到人数</div>
          <el-table :span-method="SpanCellMerge" :data="tableData2" height="300" style="width: 100%">
            <el-table-column align = "center" prop="deptName" label="部门" width="130" />
            <el-table-column align = "center" prop="userLate" label="工号" width="130" />
            <el-table-column align = "center" prop="empName" label="名字" width="130" />
            <el-table-column align = "center" prop="lateTime" label="迟到时间" />
          </el-table>
        </div>
      </div>
    </el-scrollbar>
  </div>
  </el-scrollbar>
</template>

<script setup>
import {computed, nextTick, reactive, ref} from "vue";
import {onBeforeMount, onMounted} from "@vue/runtime-core";
import * as echarts from "echarts";
import axios from "axios";
import moment from "moment";
let tableData2=ref([]);
let merge=[];//存放需要合并列
let pos='';//需要合并下标
let merge2=[];//存放需要合并列
let pos2='';//需要合并下标
const getSpanArr=(data)=>{
  for (let i = 0; i < data.length; i++) {
    if(i===0){
      merge.push(1);
      pos=0
    }else{
      if(data[i].deptName===data[i-1].deptName){
        merge[pos]+=1;
        merge.push(0);
      }else{
        merge.push(1);
        pos=i;
      }
    }
  }
}
const getSpanArr2=(data)=>{
  for (let i = 0; i < data.length; i++) {
    if(i===0){
      merge2.push(1);
      pos2=0
    }else{
      if(data[i].deptName===data[i-1].deptName){
        merge2[pos2]+=1;
        merge2.push(0);
      }else{
        merge2.push(1);
        pos2=i;
      }
    }
  }
}
const SpanCellMerge=({row,column,rowIndex,columnIndex})=>{
  if(columnIndex===0){
    const _row=merge[rowIndex];
    const _col=_row > 0 ? 1 : 0;
    return{
      rowspan:_row,
      colspan:_col
    }
  }
}
const SpanCellMerge2=({row,column,rowIndex,columnIndex})=>{
  if(columnIndex===0){
    const _row=merge2[rowIndex];
    const _col=_row > 0 ? 1 : 0;
    return{
      rowspan:_row,
      colspan:_col
    }
  }
}
const tableData = ref([])
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({});
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart2 = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts2 = reactive({});
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart3 = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts3 = reactive({});
//4.定义好echarts的配置数据
let option = {
  title: {
    text: '部门人数'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '0%',
    right: '4%',
    bottom: '6%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['F部门', 'A部门', 'B部门', 'C部门', 'E部门', 'D部门']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    }
  ]
};
let late=0;
let early=0
//onMounted钩子函数
onBeforeMount(()=>{
  //初始化echarts
  axios.post("checkOa/company/attendance/all/"+moment(new Date()).format('yyyy-MM')).then((res)=>{
    tableData2.value=res.data.data.lateList
    tableData.value=res.data.data.earlyList
    getSpanArr(tableData2.value)
    getSpanArr2(tableData.value)
    let option3 = {
      title: {
        text: '部门早退分布',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: '5%',
      },
      series: [
        {
          name: '部门早退人数',
          type: 'pie',
          radius: '50%',
          right:"10%",
          data: [
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    let option2 = {
      title: {
        text: '部门迟到分布',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: '5%',

      },
      series: [
        {
          name: '部门迟到人数',
          type: 'pie',
          radius: '50%',
          right:"10%",
          data: [
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option2.series[0].data=res.data.data.late
    option3.series[0].data=res.data.data.ealy
    late=res.data.data.late.length
    console.log(late)
    for (let i = 0; i < res.data.data.ealy.length; i++) {
      early+=res.data.data.ealy[i].value
    }
    //初始化echarts实例方法
    const init = ()=>{
      //3.初始化container容器
      myEcharts= echarts.init(chart.value);
      //5.传入数据
      myEcharts.setOption(option);
      //additional：图表大小自适应窗口大小变化
      window.onresize = ()=>{
        myEcharts.resize();
      }
      //3.初始化container容器
      myEcharts2= echarts.init(chart2.value);
      //5.传入数据
      myEcharts2.setOption(option2);
      window.onresize = ()=>{
        myEcharts.resize();
      }
      //3.初始化container容器
      myEcharts3= echarts.init(chart3.value);
      //5.传入数据
      myEcharts3.setOption(option3);
      window.onresize = ()=>{
        myEcharts.resize();
      }
    }
    init();
  })
})
</script>

<style scoped>
#container{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
#container2{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
#container3{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.dd{margin: 0px 60px}
.dd div{
  text-align: center;
}
</style>